import React from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
  ScrollView,
} from 'react-native';
import CommonAvatarView from '../common/CommonAvatarView';
import CommonListPage from '../common/CommonListPage';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import HeartRequestMsgListAction from '../../actions/heart/HeartRequestMsgListAction';
import BaseItem from '../common/BaseItem';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import CommonStyles from '../../common/CommonStyles';

export default class HeartMsgListPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._viewPager = null;
    this._noEmpty = true;
    this._itemClickEnable = false;

    this._dataKey = "msguser_id";
  }

  _getListViewStyle() {
    return {
        alignItems: 'center',
        width:SizeUtils.getWindowSize().width,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop),
        backgroundColor:"#ffffff"};
  }

  _onPressItem(data) {
    if(data.name == "") {
      ToastUtils.show("此用户不存在");
      return;
    }
    data.type = this.props.pageData.routeData.type;
    // ToastUtils.show("该功能暂未开放");
    if(data.type == 1) {
      this.gotoPage(Config.pages.heart_love_chat, data);
    }
    else if(data.type == 2) {
      this.gotoPage(Config.pages.heart_secret_msg_chat, data);
    }
    else if(data.type == 3) {
      this.gotoPage(Config.pages.user_manager_chat, data);
    }
  }

  _getViewStyle() {
    return {paddingTop:Platform.OS === "ios"? (Config.paddingTop) : SizeUtils.translateDesignHeightToCode(66),
        justifyContent: 'space-around', backgroundColor:"#ffffff"}
  }

  _requestData(page, listView) {
      new HeartRequestMsgListAction().call(listView, {page:page, page_size:10, type:this.props.pageData.routeData.type});
      if(this._listView != null){
        this._listView.doRefresh();
      }

  }

  _onRenderItem(data, rowID) {
    return (
        <Item key={rowID} data={data} rowID={rowID} onPress={() => this._onPressItem(data)}
          onPressDelete={() => this._onPressItemDelete(data)} />
    )
  }

  _getTitle() {
    if(this.props.pageData.routeData.type == 1) {
      return "爱情事消息";
    }
    else if(this.props.pageData.routeData.type == 2) {
      return "秘密留言";
    }
    else if(this.props.pageData.routeData.type == 3) {
      return "管理员私信";
    }
  }

  _onPressNavigationBarRightBtn() {

  }

  _onPressItemDelete(data) {

  }
}

var RIGHT_VIEW_WIDTH = 0;
const HEADER_SIZE = 80;

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  render() {
    return (
        <View style={{width:SizeUtils.getWindowSize().width,
              height:SizeUtils.translateDesignWidthToCode(HEADER_SIZE) + SizeUtils.translateDesignHeightToCode(40),
              flexDirection:"row", alignItems: 'center',backgroundColor:"#ffffff", borderColor:"#eeeeee",
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
              <ScrollView style={{width:SizeUtils.getWindowSize().width}}
                  horizontal={true}   // 水平方向
                  showsHorizontalScrollIndicator={false}  // 水平指示器
                  showsVerticalScrollIndicator={false}    // 垂直指示器
                  alwaysBounceHorizontal={false} //弹性拉动一截
                  >
                <View style={{width:SizeUtils.getWindowSize().width + SizeUtils.translateDesignWidthToCode(RIGHT_VIEW_WIDTH),
                    flexDirection:"row"}}>
                  {this._renderLeftView()}
                  {/* {this._renderRightView()} */}
                </View>
              </ScrollView>

        </View>
    )
  }

  _renderLeftView() {
    return (
      <TouchableOpacity style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"row", alignItems:"center", paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40), backgroundColor:"#ffffff",
          paddingBottom:SizeUtils.translateDesignHeightToCode(20),
          paddingTop:SizeUtils.translateDesignHeightToCode(20),}}
          onPress={this._onPressLeftView.bind(this)}>
        <CommonAvatarView avatarUri={this._getImageSource()} size={HEADER_SIZE} unreadNum={this.props.data.unread_count}/>
        <View style={{flex:1, flexDirection: "column",
              marginLeft:SizeUtils.translateDesignWidthToCode(20)}}>
            <View style={{flexDirection:"row", justifyContent:"space-between"}}>
              <Text numberOfLines={1}
                style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#000000"}}>
                  {this.props.data.name}
              </Text>
              <Text numberOfLines={1}
                style={{color:"#cccccc", fontSize:SizeUtils.translateFontSizeToCode(24)}}>
                  {this.props.data.last_msg_at}
              </Text>
            </View>
             <Text numberOfLines={1}
                style={{marginTop:SizeUtils.translateDesignHeightToCode(15),color:"#cccccc",fontSize:SizeUtils.translateFontSizeToCode(24)}}>
                  {this.props.data.last_msg_content}
              </Text>
        </View>
      </TouchableOpacity>
    )
  }

  _onPressLeftView() {
    this.props.onPress(this.props.data);
  }

  _renderRightView() {
    return (
      <View style={{width:SizeUtils.translateDesignWidthToCode(RIGHT_VIEW_WIDTH),
          backgroundColor:"#db3132", flexDirection:"row", flexDirection:"row", alignItems:"center",
            justifyContent:"center"}} onPress={this._onPressRightView.bind(this)}>
          <Text style={{color:"#ffffff", textAlign:"center",
              fontSize:SizeUtils.translateFontSizeToCode(30)}}>
            {"删 除"}
          </Text>
      </View>
    )
  }

  _onPressRightView() {
    this.prop.sonPressDelete(this.props.data);
  }

  _getImageSource() {
    // console.log("_getImageSource", this.props.data);
    if(this.props.data.avatar_url) {
      return this.props.data.avatar_url;
    }
    else {
      return "";
    }
  }

  _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity(time)
    return timeStr;
  }
}
